<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="./css/bar.css">
  <link rel="stylesheet" href="../css/layui.css"  media="all">
  <script src="/static/jquery-1.8.0.min.js"></script>
  <title>个人账单</title>
</head>
<body>
<div>
<ul class="layui-nav">
  <li class="layui-nav-item layui-this">
    <a href="index.html">全体账单</a>
  </li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=dhq">海权</a></li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=toshi">toshi</a></li>
  <li class="layui-nav-item layui-this"><a href="personalreceivablebills.html?name=lgh">贵豪</a></li>
</ul>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo" style="position:relative;">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="showPayable">应付账单</button>
    <button class="layui-btn layui-btn-sm" lay-event="addBill" >添加账单</button>
  </div>
</script>

<script type="text/html" id="barDemo">
</script>

<script src="js/tool.js" charset="utf-8"></script>
<script src="../layui.js" charset="utf-8"></script>
<script>
  
  var name =  getParams("name");
  console.log(name);
  //此处注意异步加载
  var data;
  $.ajax({
    type: 'get'
    ,url: "/bills/receivable/" + name
    ,contentType: "application/x-www-form-urlencoded"
    ,async: false
    ,dataType: 'json'
    ,success: function(res){
      data = res;
      console.log(data)
      for (var i = 0; i < data.length; i++) {
        var proportion = 0;
        for(var j=0; j<3; j++){
          proportion += data[i].participants[j].proportion;
        }
        for(var j=0; j<3;j++){
          data[i][data[i].participants[j].username] = (data[i].participants[j].proportion / proportion * data[i].amount).toFixed(2);    
          data[i][data[i].participants[j].username+"Paid"] = data[i].participants[j].paid;
        }
        data[i].payTime =timestampToTime(data[i].payTime);
        data[i]['paid'] = data[i].participants[0].paid && data[i].participants[1].paid && data[i].participants[2].paid;
        console.log(data[i]);
      }
    }
  });
  layui.use('element', function(){
    var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
    
    //监听导航点击
    element.on('nav(demo)', function(elem){
      //console.log(elem)
      layer.msg(elem.text());
    });
  }); 
  layui.use('table', function(){
      var table = layui.table;
      //表格渲染
      table.render({
        elem: '#test'
        ,title: '用户数据表'
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,cols: [[
          {field:'message', title:'账单', width:120, edit: 'text', rowspan:"2", align:'center'}
          ,{field:'drawee', title:'付款人', width:100, rowspan:"2", align:'center'}
          ,{field:'payTime', title:'付款时间', width:140,sort:true, rowspan:"2", align:'center'}
          ,{field:'amount', title:'金额', width:100, rowspan:"2", align:'center'}
          ,{toolbar: '#paymen', title:'分摊', width:100, align:'center', colspan:"6"}  
          ,{fixed: 'right', title:'操作', width:150, rowspan:"2", align:'center', templet:function(res){
            return '<a class="layui-btn layui-btn-xs" lay-event="edit" onclick="updateBill(' + res.billId + ')">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="' + res.billId + '">删除</a>'
          }}
        ], [
          {field: 'lgh', title: '贵豪', align:'center', width: 80}
          ,{title: '结算', align:'center', width: 110, templet:function(res){
            if(res.lghPaid)
              return '<span>已结算</span>';
            else
              return '<a class="layui-btn layui-btn-xs layui-btn-normal" name="settle" lay-event="settleLgh" title="结算">结算</a>';
          }}
          ,{field: 'dhq', title: '海权', align:'center', width: 80}
          ,{title: '结算', align:'center', width: 110, templet:function(res){
            if(res.dhqPaid)
              return '<span>已结算</span>';
            else
              return '<a class="layui-btn layui-btn-xs layui-btn-normal" name="settle" lay-event="settleDhq" title="结算">结算</a>';
          }}
          ,{field: 'toshi', title: 'toshi', align:'center', width: 80}
          ,{title: '结算', align:'center', width: 110, templet:function(res){
            if(res.toshiPaid)
              return '<span>已结算</span>';
            else
              return '<a class="layui-btn layui-btn-xs layui-btn-normal" name="settle" lay-event="settleToshi" title="结算">结算</a>';
          }}
        ]]
        ,page: true
        ,data: data
      });
    //头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
          case 'showPayable':
          console.log(name)
          window.location.href = "personalpayablebills.html?name=" + name;
          break;
          case 'addBill':
            ShowAmountDetail();
          break;
          //自定义头工具栏右侧图标 - 提示
          case 'LAYTABLE_TIPS':
            layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
        };
      });
      
      //监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        //console.log(obj)
        if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            deleteBill(data.billId);
            layer.close(index);
          });
        }else if(obj.event === 'settleLgh'){
          settle(data.billId,"lgh")
        }else if(obj.event === 'settleDhq'){
          settle(data.billId,"dhq")
        }else if(obj.event === 'settleToshi'){
          settle(data.billId,"toshi")
        }
      });
    });
    
    function ShowAmountDetail() {
      var index = layer.open({
      type: 2,
      title: '填写账单明细',
      shadeClose: false,
      skin: 'layui-layer-rim',
      area: ['600px', '700px'],
      maxmin: true,
      content: 'editbill.html?name=' + name,
      btn: [],
      cancel: function () {
        window.location.reload();
      }
    });
    // layer.full(index);
  }
  function updateBill(billId) {
    console.log(billId)
    var index = layer.open({
    type: 2,
    title: '填写账单明细',
    shadeClose: false,
    skin: 'layui-layer-rim',
    area: ['600px', '700px'],
    maxmin: true,
    content: 'updatebill.html?id='+billId,
    btn: [],
    cancel: function () {
			document.location.reload();
    }
    });
    // layer.full(index);
  }

  function settle(id, name){
    $.ajax({
      type: 'put',
      url: "/bills/settle/"+id+"/"+name,
      contentType:"application/json",
      success: function(res){
        if(res.code==0){
          layer.msg('结算成功',{time: 1000,success: function(){
            document.location.reload();
          }});
        }else{
				layer.msg('结算失败',{time:1000});
			}
      },
      dataType: "json"
	  });
  }

  function deleteBill(id){
    $.ajax({
      type: 'delete',
      url: "/bills/"+id,
      contentType:"application/json",
      success: function(res){
        if(res.code==0){
			  	layer.msg('删除账单成功',{time:1000});
          document.location.href = "personalreceivablebills.html?name=" + name;
        }else{
			  	layer.msg('删除账单失败',{time:1000});
			}
      },
      dataType: "json"
	  });
  }

</script>

</body>
</html>